<script lang="ts" setup>
import on from "./assets/on.svg"
import off from "./assets/off.svg"
import { isReactive, ref } from "vue";

const isShow=ref(true)
const isOn=()=>{
  isShow.value=!isShow.value
}
</script>

<template>
<button @click="isOn()">开关</button>
<img :src="isShow?on:off" alt="">
<p :class="isShow?isReactive:''">{{ isShow }}</p>
</template>

<style scoped>
.isReactive{
  background-color: aqua;
}
</style>